<template>
    <div class="flex justify-center mt-10">
      <div
        v-for="(item, index) in items"
        :key="index"
        :class="[
          'w-12 h-48 mx-1.25 transition-width duration-500 overflow-hidden text-white ',
          activeIndex === index ? 'w-96' : ''
        ]"
        @mouseenter="handleMouseEnter(index)"
      >
        <h2 v-if="activeIndex!== index" class=" h-full bg-[#da1526] text-xl p-2 text-center">
          {{ item.title }}
        </h2>
        <div v-if="activeIndex === index" :class="[ 'text-lg',activeIndex === index ? 'bg-[#0d289180] h-full' : '']">
          {{ item.content }}
        </div>
      </div>
    </div>
  </template>
  

  <script setup lang="ts">
  import { ref } from 'vue';

  const items = [
    { title: '标题 1', content: '这里是标题 1 的详细内容，可根据实际情况修改。' },
    { title: '标题 2', content: '这里是标题 2 的详细内容，可根据实际情况修改。' },
    { title: '标题 3', content: '这里是标题 3 的详细内容，可根据实际情况修改。' },
    { title: '标题 4', content: '这里是标题 4 的详细内容，可根据实际情况修改。' }
  ];
  
  const activeIndex = ref<number>(0);
  
  const handleMouseEnter = (index:number) => {
    activeIndex.value = index;
  };
  </script>
  
  <style scoped>
  /* 如果你需要额外的自定义样式可以在这里添加 */
  </style>    